<!--
 * @Description  : 
 * @Autor        : guoxi
 * @Date         : 2022-07-21 14:35:42
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-08-03 19:35:29
 * @FilePath     : \rpms\src\views\project\manage\components\stopDialog.vue
-->
<template>
  <el-form
    :model="changeFormData"
    ref="changeFormRef"
    @submit.prevent
    :rules="changeFormRules"
    label-width="100px"
  >
    <el-row>
      <el-col>
        <el-form-item label="项目名称" prop="projectId">
          <el-select
            v-model="changeFormData.projectId"
            filterable
            clearable
            remote
            style="width: 100%"
            :remote-method="initProjectList"
            @change="changeProject"
          >
            <el-option
              v-for="item in projectArr"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            ></el-option>
          </el-select>
          <!-- <el-input v-model.trim="changeFormData.projectName"></el-input> -->
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="项目编码">
          <el-input
            disabled
            v-model.trim="changeFormData.projectCode"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="终止事由" prop="alterationReason">
          <el-input v-model.trim="changeFormData.alterationReason"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="终止时间" prop="alterationTime">
          <el-date-picker
            style="width: 100%"
            v-model="changeFormData.alterationTime"
            value-format="YYYY-MM-DD hh:mm:ss"
            type="date"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="changeFormData.remark" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-row justify="end">
    <el-button @click="handleCancel">取 消</el-button>
    <el-button type="primary" @click="handleSubmit">确定终止</el-button>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
import { useUpload } from "/@/hooks";
import { postProjectList } from "/@/api/project";
export default defineComponent({
  name: "ChangeDialog",

  emits: ["submit", "cancel"],
  //   emits: ["change", "load"],
  setup(props, ctx) {
    const {
      handleError,
      beforeAvatarUpload,
      uploadComUrl,
      acceptTypes,
      uploadHeaders
    } = useUpload();
    const changeFormRef = ref<HTMLFormElement | null>(null) as any;
    let state = reactive({
      projectArr: [],
      changeFormData: {
        projectObj: null,
        projectCode: "",
        projectId: null,
        alterationReason: "",
        alterationTime: "",
        remark: ""
      },
      changeFormRules: {
        projectId: [
          { required: true, message: "请选择需终止的项目", trigger: "change" }
        ],
        alterationReason: [
          { required: true, message: "请输入终止事由", trigger: "change" }
        ],
        alterationTime: [
          { required: true, message: "请选择终止时间", trigger: "change" }
        ]
      }
    });

    const changeProject = item => {
      state.changeFormData.projectObj = state.projectArr.find(
        el => el.id === item
      );
      state.changeFormData.projectCode =
        state.changeFormData.projectObj.projectCode;
    };
    const handlePreview = (item: any) => {
      if (item.response) {
        window.open(
          `${location.origin}${location.pathname}#/online?uuidFile=${item?.response.data.uuidFile}&fileName=${item?.response.data.fileName}`
        );
      } else {
        window.open(
          `${location.origin}${location.pathname}#/online?uuidFile=${item.uuidFile}&fileName=${item.fileName}`
        );
      }
    };

    const handleCancel = () => {
      ctx.emit("cancel");
    };
    const handleSubmit = async () => {
      const isValid = await new Promise(resolve =>
        changeFormRef.value.validate(resolve)
      );

      if (isValid) {
        ctx.emit("submit", state.changeFormData);
      }
    };

    const initProjectList = async (query = "") => {
      // 真实请求待添加
      try {
        const { code, data } = await postProjectList({
          projectNameLike: query,
          projectCodeLike: "",
          createUserNameLike: "",
          projectTypeCode: "",
          documentName: "",
          documentType: "",
          achievementType: "",
          expertName: "",
          costName: "",
          createTimeStrStart: "",
          createTimeStrEnd: "",
          flowStatus: "",
          pageSize: 0,
          pageNum: 1
        });
        if (code === 200) {
          // <!-- stageStatus:项目阶段   (0：建档 1：可研、2：立项、3：实施、4：验收、5：后评价) -->
          //       <!-- saveStatus:保存状态    (1保存、2提交 3、已审核 4、驳回 5、变更中 6、终止申请中 7、已终止 8、变更驳回) -->
          //       <!-- stageApproveStatus:阶段流转状态    (1、未提交 2、提交流转 3、已审核 4、驳回) -->
          //       <!-- canProcess是否可以审核(阶段流转提交)    0:否，1：是 -->
          //       <!-- canAuth是否可以审核(草稿项目提交)       0:否，1：是 -->
          //       <!-- canAdminProcess建档阶段只有管理员可以审核(阶段流转提交)  0:否，1：是 -->
          state.projectArr = data.list.filter(row => {
            return row.stageStatus !== "6" && row.saveStatus !== "6";
          });
          // total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      }
    };

    onMounted(() => {
      initProjectList();
    });

    return {
      initProjectList,
      handleCancel,
      changeFormRef,
      changeProject,
      handlePreview,
      handleError,
      beforeAvatarUpload,
      uploadComUrl,
      acceptTypes,
      uploadHeaders,
      handleSubmit,
      ...toRefs(state)
    };
  }
});
</script>
<style lang="scss" scoped>
.btnClass {
  margin-bottom: 10px;
}
</style>
